<template>
  <div class="header">
    <el-row :gutter="15">
      <!--方块-->
      <el-col :span="1">
        <el-button @click="toggleMenu" type="primary" plain icon="el-icon-menu" size="mini"></el-button>
      </el-col>
      <!--标签-->
      <el-col :span="10">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item v-for="item in tags" :key="item.path"
                              :to="{ path: redirectPage(item) }">{{ item.label }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
      <!--头像-->
      <el-col :span="1" style="float:right; margin-right: 15px;">
        <el-dropdown @command="handleCommand">
          <img class="icon user-icon" :src="userInfo.icon" alt="头像">
          <el-dropdown-menu slot="dropdown" style="margin-top: -15px;">
            <el-dropdown-item command="index">个人中心</el-dropdown-item>
            <el-dropdown-item command="logout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import {mapGetters, mapMutations, mapState} from "vuex";

export default {
  name: "CommonHeader",
  computed: {
    ...mapState({
      tags: state => state.tab.tabsList
    }),
    ...mapGetters('login', ['userInfo'])
  },
  methods: {
    ...mapMutations('login', ['clearUserInfo']),
    ...mapMutations('tab', ['clearMenu']),
    toggleMenu() {
      this.$store.commit('tab/collapseMenu')
    },
    // 页面跳转，因为to必须要填入一个路径，无法选择不跳转，故把逻辑写在这里
    // 但是连续点击首页还是会出来错误,可以采用网上的方法一劳永逸
    redirectPage(item) {
      let path = item.path
      // 在path后面添加###(哈希值)就可以避免跳转，但是第二次点击还是会报错，因为###是不计入$route.path中，所以使用添加和删除###
      if (this.$route.hash !== '###' && path === this.$route.path) {
        path = '###'
      }
      return path
    },
    handleCommand(command) {
      if (command === 'logout') this.userLogout()
    },
    // 退出登录
    userLogout() {
      // TODO 删除store中数据，界面会有一瞬间获取不到需要的属性而报错，尚不知道如何解决
      this.$router.push({name: 'login'})
      this.clearUserInfo()
      this.clearMenu()
    }
  },
}
</script>

<style scoped>
.header {
  height: 100%;
}

.el-row {
  height: 100%; /*需要设置高度，不然row的内边距会顶出去，覆盖标签*/
}

.user-icon {
  width: 50px;
  height: 50px;
  margin: 5px;
  cursor: pointer;
  border-radius: 50%;
}

.el-col {
  /*text-align: center;*/
  line-height: 55px;
  color: #fff;
}

.el-breadcrumb {
  display: inline-block;
}

</style>
